<template>
  <div class="index-container-ty index-page">
    <a-spin :spinning="loading">
      <IndexHeader title="能耗偏离分析曲线"></IndexHeader>
      <a-row :gutter="24" class="current-date">
        <a-col :sm="24" :md="12" :xl="12">
          <span class="current-date-span">时间范围</span>
          <a-range-picker v-model="times" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12" style="text-align: right">
          <span class="current-date-content">{{ currentDate }}</span>
        </a-col>
      </a-row>
      <a-row type="flex" justify="start" :gutter="40" class="content">
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              水能耗偏离分析
            </div>
            <div class="content-chart">
              <LineEchartxy eId="shui" :dataSource="dataSource"></LineEchartxy>
            </div>
            <div class="content-date">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                v-model="searchObj.year"
                style="width: 100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              />
            </div>
          </div>
        </a-col>

        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              蒸汽能耗偏离分析
            </div>
            <div class="content-chart">
              <LineEchartxy eId="zhengqi" :dataSource="dataSource"></LineEchartxy>
            </div>
            <div class="content-date">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                v-model="searchObj.year"
                style="width: 100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              />
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              电能耗偏离分析
            </div>
            <div class="content-chart">
              <LineEchartxy eId="dian" :dataSource="dataSource"></LineEchartxy>
            </div>
            <div class="content-date">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                v-model="searchObj.year"
                style="width: 100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              />
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              燃气能耗偏离分析
            </div>
            <div class="content-chart">
              <LineEchartxy eId="ranqi" :dataSource="dataSource"></LineEchartxy>
            </div>
            <div class="content-date">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                v-model="searchObj.year"
                style="width: 100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              />
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import noDataPng from '@/assets/nodata.png'
import LineEchartxy from '@/components/chart/LineEchartxy'
import IndexHeader from './IndexHeader'

export default {
  name: 'IndexTask',
  components: { LineEchartxy, IndexHeader },
  data() {
    return {
      loading: false,
      yearShowOne:false,
      searchObj: {
        year: '',
      },
      times: [],
      textMaxLength: 8,
      dataSource1: [],
      dataSource2: [],
      dataSource3: [],
      dataSource4: [],
      currentDate: '',
      intelvalObj: null,
      columnsPolice: [
        {
          title: '预警日期',
          align: 'center',
          dataIndex: 'restDay',
          width: 80,
        },
        {
          title: '所属能源',
          align: 'center',
          dataIndex: 'orderTitle',
          scopedSlots: { customRender: 'ellipsisText' },
        },
        {
          title: '预警设备',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '预警类型',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '预警内容',
          align: 'center',
          dataIndex: 'orderNo',
        },
      ],
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'restDay',
          width: 80,
        },
        {
          title: '总计费用',
          align: 'center',
          dataIndex: 'orderTitle',
          scopedSlots: { customRender: 'ellipsisText' },
        },
        {
          title: '蒸汽（m³）',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '产量',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '费用均耗/只',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '能源均耗/只',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '同比',
          align: 'center',
          dataIndex: 'orderNo',
        },
      ],
      dataSource: {
        data: [
          [120, 132, 101, 134, 90, 230, 210],
          [220, 182, 191, 234, 290, 330, 310],
        ],
        legend: ['参考值', '实际值'],
        xAxis: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
      },
    }
  },
  created() {
    this.mock()
  },
  mounted() {
    this.currentDate = this.formatDateTime(new Date())
    this.intelvalObj = setInterval(() => {
      this.currentDate = this.formatDateTime(new Date())
    }, 1000)
  },
  methods: {
     // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.searchObj.year = value
      this.yearShowOne = false
    },
    formatDateTime(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    getTipColor(rd) {
      let num = rd.restDay
      if (num <= 0) {
        return tip_red
      } else if (num >= 1 && num < 4) {
        return tip_yellow
      } else if (num >= 4) {
        return tip_green
      }
    },
    goPage() {
      this.$message.success('请根据具体业务跳转页面')
      //this.$router.push({ path: '/comp/mytask' })
    },
    mock() {
      this.dataSource1 = tempSs1
      this.dataSource2 = tempSs2
      this.dataSource3 = tempSs1
      this.dataSource4 = []
      this.ifNullDataSource(this.dataSource4, '.tytable4')
    },

    ifNullDataSource(ds, tb) {
      this.$nextTick(() => {
        if (!ds || ds.length == 0) {
          var tmp = document.createElement('img')
          tmp.src = noDataPng
          tmp.width = 300
          let tbclass = `${tb} .ant-table-placeholder`
          document.querySelector(tbclass).innerHTML = ''
          document.querySelector(tbclass).appendChild(tmp)
        }
      })
    },
    handleData() {
      this.$message.success('办理完成')
    },
  },
  beforeDestroy() {
    clearInterval(this.intelvalObj)
    this.intelvalObj = null
  },
}
</script>

<style lang="less" scoped>
.index-page {
  background: url('../../assets/images/index/u1.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 12px 12px 0;
  height: 1016px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  p {
    margin: 0;
    padding: 0;
  }
  .current-date {
    width: 100%;
    position: absolute;
    top: 70px;
    .current-date-span {
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #6e98fc;
      line-height: 22px;
      margin-right: 10px;
    }
    /deep/.ant-input {
      background-color: rgba(0, 102, 153, 0.498039215686275);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      font-size: 12px;
      color: #6e98fc;
      text-align: left;
      line-height: 22px;
    }
    /deep/.ant-calendar-range-picker-separator {
      color: #6e98fc;
    }
    /deep/.ant-calendar-picker-clear {
      background: transparent;
      color: #fff;
    }
    .current-date-content {
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      color: #6e98fc;
      line-height: 22px;
    }
  }
  .content {
    width:95%;
    margin:0 auto !important;
    position: relative;
    top: 10px;
    .content-item {
      
      height: 331px;
      background: url('../../assets/images/index/u23.png') no-repeat;
      background-size: 100% 100%;
      padding: 20px 13px;
      box-sizing: border-box;
      margin-bottom: 15px;
      .item-title {
        display: flex;
        align-items: center;
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        line-height: 28px;
        margin-bottom: 10px;
        .item-title-icon {
          width: 12px;
          height: 14px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
        }
      }
      .content-chart {
        height: 250px;
      }
      .content-date {
        position: absolute;
        top: 50px;
        right: 30px;
        display: flex;
        /deep/.ant-input {
          width: 112px;
          height: 29px;
          background-color: rgba(19, 41, 89, 1);
          box-sizing: border-box;
          border: 1px solid rgba(182, 215, 255, 1);
          border-radius: 6px;
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          font-family: 'Helvetica Neue ', 'Helvetica Neue', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #f0f7ff;
          text-align: left;
        }
        /deep/.ant-calendar-picker-icon{
          color:#666;
        }
        /deep/.ant-calendar-picker-clear{
          color:#fff;
          background: transparent;
        }
      }
    }
  }
}
</style>